<template>
	<view>
		<view style="" class="form">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u-form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm" labelWidth="80">
				<u-form-item label="收货人" prop="name" borderBottom>
					<u-input v-model="userInfo.name" border="none" placeholder="请填写收货人姓名"></u-input>
				</u-form-item>
				<u-form-item label="联系方式" prop="phone" borderBottom>
					<u-input v-model="userInfo.phone" border="none" placeholder="请填写收货人手机号码"></u-input>
				</u-form-item>
				<u-form-item label="所在地区" prop="citys" borderBottom>
					<view class="flex flex-ai-c f1" @click="show = true">
						<u-input v-model="userInfo.citys" border="none" placeholder="省市区县、乡镇等"></u-input>
						<view style="padding: 0 20rpx;" class="font-28" @click.stop="handleLocation">定位</view>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail" borderBottom>
					<u-input v-model="userInfo.detail" border="none" placeholder="街道、楼牌号等"></u-input>
				</u-form-item>
			</u-form>
			<view class="flex flex-ai-c flex-jc-sb" style="padding: 40rpx 0;">
				<view>
					<view class="font-32">设置默认地址</view>
					<view style="margin-top: 10rpx;color: #999999;" class="font-24">提醒：每次补货会默认推荐使用该地址</view>
				</view>
				<u-switch v-model="userInfo.is_default" :active-value="1" :inactive-value="0" activeColor="#FCB527"
					size="30"></u-switch>
			</view>
		</view>
		<view class="btn">
			<ButtonConfirm @click="editDeviceInfo" myTxt="保存"></ButtonConfirm>
		</view>
		<areaPicker @cancel="show = false" :show="show" @addrConfirm="addrConfirm" />
	</view>
</template>

<script>
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	import user from '@/api/user.js';
	import location from '@/utils/location.js'
	import areaPicker from '@/components/areaPicker.vue';
	export default {
		components: {
			ButtonConfirm,
			areaPicker
		},
		data() {
			return {
				show: false,
				userInfo: {
					name: '',
					phone: '',
					citys: '',
					detail: '',
					is_default: 0
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写收货人姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请填写联系方式',
						trigger: ['blur', 'change']
					},
					'citys': {
						type: 'string',
						required: true,
						message: '请填写所在地区',
						trigger: ['blur', 'change']
					},
					'detail': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
				},

			};
		},
		onLoad(op) {
			if (op.status === 'add') {

			} else {
				let data = JSON.parse(op.info)
				for (let i in data) {
					this.$set(this.userInfo, i, data[i])
				}

				this.$nextTick(() => {
					this.$refs.uForm.setRules(this.rules)
				})
			}
		},
		methods: {
			addrConfirm(v, n) {
				this.$set(this.userInfo, 'citys', `${n.proviceName}/${n.cityName}/${n.districtName}`)
				this.$set(this.userInfo, 'detail', ``)
				this.show = false
			},
			handleLocation() {
				location('qq').then((res) => {
					const {
						province,
						city,
						district
					} = res.info
					this.$set(this.userInfo, 'citys', `${province}/${city}/${district}`)
					this.$set(this.userInfo, 'detail', res.address.name)
				})
			},
			async editAddress() {
				const res = await user.editAddress(this.userInfo)
				if (res.code === 200) {
					uni.$u.toast('保存成功')
					setTimeout(() => {
						uni.navigateBack()
					},1000)
				}
			},
			editDeviceInfo() {
				this.$refs.uForm.validate().then(res => {
					this.editAddress()
				}).catch(errors => {
					for (let i = 0; i < errors.length; i++) {
						if (errors[i].field) {
							uni.$u.toast(errors[i].message)
							break
						}
					}
				})
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	};
</script>
<style>
	page {
		background: #EEEFF0;
		overflow: hidden;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-input-input:disabled{
		background: #fff;
	}
	.btn {
		position: fixed;
		bottom: 70rpx;
		width: 100%;
	}

	.form {
		padding: 0 30rpx;
		background: #fff;
		margin-top: 10rpx;
	}
</style>